<template>
  <div class="tableBox">
    <div class="cmb-16 flex float-right">
      <cusButton color type="primary" @click="sortHandler" v-if="false">
        <i-ep-SwitchButton />
        <span style="padding-left:5px">{{ sortFlag ? '关闭' : '开启' }}排序</span>
      </cusButton>
    </div>
    <div class="cmt-16">
      <el-table v-loading="loading" element-loading-text="加载中..." :data="tableData" class="ELtable" :height="height"
        :width="width" stripe :tree-props="treeProps" :header-cell-style="{ background: '#F3F3F4', color: '#323233', }"
        :row-key="(row) => {
        return row.id;
      }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="30" :reserve-selection="true" v-if="showSelect" class-name="selected">
        </el-table-column>
        <el-table-column label="序号" type="index" align="center" class-name="selected" width="100">
        </el-table-column>
        <el-table-column v-for="(column, index) in tableColumns" :key="`col_${index}`" :label="column.label"
          :prop="column.prop" :index="index" :row-index="null" :fixed="column.fixed ? column.fixed : false"
          :sortable="column.sortable ? column.sortable : false" :min-width="column.width ? column.width : 100"
          class-name="allow-drag">
          <template #default="scope">
            <div v-if="column.slot">
              <slot :name="column.prop" v-bind="scope"></slot>
            </div>
            <div v-else>{{ scope.row[column.prop] }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import Sortable from "sortablejs"; //http://www.sortablejs.com/options.html 配置项中文文档
/**
 * @param tableData     // 表格数据
 * @param tableColumns  // 表格列数据
 * @param height        // 表格高度
 * @param width         // 表格宽度
 *  *
 */
const props = defineProps({
  tableData: {
    type: [Array],
    defaule: [],
  },
  tableColumns: {
    type: [Array],
    defaule: [],
  },
  height: {
    type: [Number, String],
    default: "520",
  },
  width: {
    type: [Number, String],
    default: "100%",
  },
  loading: {
    type: [Boolean],
    default: false,
  },
  treeProps: {
    type: [Object],
    default: {},
  },
  showSelect: {
    type: Boolean,
    default: true,
  },
});

const emits = defineEmits<{
  (event: "changeCol", data: Object): void;
  (event: "changeRow", data: Object): void;
}>();
onMounted(() => {
  // rowDrop();
  // columnDrop();
});
// 是否存在拖拽排序功能
const sortFlag = ref(false);
const sortHandler = () => {
  sortFlag.value = !sortFlag.value;
  if (sortFlag.value) {
    rowDrop();
    columnDrop();
  } else {
    sortable_wrap.destroy();
  }
};

let sortable_wrap = reactive(null || Object);
// 行拖拽
const rowDrop = () => {
  const tbody = document.querySelector(".ELtable tbody");
  sortable_wrap = Sortable.create(tbody, {
    animation: 150, //动画参数
    onEnd({ newIndex, oldIndex }) {
      // const currRow = tableData.value.splice(oldIndex, 1)[0]
      // tableData.value.splice(newIndex, 0, currRow)
      // 在此触发父组件中的方法
      emits("changeRow", { oldIndex: oldIndex, newIndex: newIndex });
    },
  });
};

// 列拖拽
const columnDrop = () => {
  const tbody = document.querySelector(".ELtable tr");
  sortable_wrap = Sortable.create(tbody, {
    animation: 180,
    delay: 10,
    filter: ".selected",
    draggable: ".allow-drag",
    onEnd: (evt) => {
      setTimeout(() => {
        emits("changeCol", { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
      }, 500);
    },
  });
};

//复选框发生变化时触发
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  console.log(val, 666);
};
</script>

<style lang="scss" scoped></style>
